<template>
  <div class="Login-form">
    <!-- model为表单数据对象 -->
    <!-- rules为表单验证规则 -->
    <el-form ref="form1" v-bind:model="FormData" v-bind:rules="rules1">
      <el-form-item prop="username">
        <el-input v-model="FormData.username" placeholder="请输入手机号码"></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input v-model="FormData.password" placeholder="请输入密码"></el-input>
      </el-form-item>
    </el-form>
    <el-row type="flex" justify="end">
      <el-button type="text">忘记密码</el-button>
    </el-row>
    <el-button v-on:click="submitForm('form1')" class="submit-btn" type="primary">提交</el-button>
  </div>
</template>

<script>
export default {
    data(){
        return{
            FormData:{
                username:'',
                password:'',
            },
            rules1:{
                username:[
                    //按照从上到下的顺序依次判断
                    {required:true,message:"手机号码不能为空哦！",trigger:'blur'},
                    {pattern: /^1[3-9]\d{9}$/,message:'手机号码格式不正确',trigger:'blur'}
                ],
                password:[
                    {required:true,message:"您的密码不符合要求",trigger:'blur'}
                ]
            }
        }
    },
    methods:{
        submitForm(FormName){
            this.$refs[FormName].validate((valid,msg)=>{
                if(valid){
                    //提交服务器
                    this.$axios({
                        url:"/accounts/login",
                        method:'post',
                        data:{
                            username: this.FormData.username,
                            password: this.FormData.password,
                        }
                    }).then(res=>{
                        console.log(res)
                        alert("登陆成功！")
                        //保存账号信息到全局全量state.userInfo
                        this.$store.commit('user/Set_userInfo',res.data)
                        //保存用户信息后转跳到首页
                        this.$router.replace('/')
                    })
                }
                else{
                    console.log("这是不通过的字段",msg)
                    alert("no!")
                    return false
                }
            })
        }
    }
}
</script>

<style>
    .submit-btn{
        width:100%
    }
    .Login-form{
        padding:20px
    }
</style>